<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:styling-css-02-b </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>
<a href="full-styling-css-02-b.html">Full version</a>, <a href="basic-styling-css-02-b.html">Basic version</a></p>
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/styling.html#StylingWithCSS">6.7 Styling with CSS</a></p>
 <p>
				<a href="full-styling-css-01-b.html">styling-css-01-b ←</a> 
				<a href="full-index.html">index</a>
				<a href="full-styling-css-03-b.html">→ styling-css-03-b</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>styling-css-02-b</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=480 height=360>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/styling-css-02-b.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=480 height=360 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/styling-css-02-b.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of styling-css-02-b" src="../png/full-styling-css-02-b.png" width="480" height="360"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
      <p>
            Verify the basic capability to handle CSS2 selectors. The style sheet is contained in a style 
            element in the SVG file. The picture is in two halves. In each half there is a group of circle, a 
            rectangle and an irregular polygon. A style on the group makes all the children have green fill. 
         </p>
      <p>
            In the upper test, the selector is ID. The two 'rect' elements have id="one" and id="two" 
            respectively and the selector #one, #two selects the rectangles and gives them a red fill. 
            The rectangle should be red, with the circle and polygon green. 
            </p>
      <p>
            In the lower test, the selector is on an arbitrary attribute. The transform attribute has a 
            value of "scale(2)" on the circle in the lower test, and if correctly selected this circle will be 
            filled red (if the transform itself fails, the circle will be in the wrong position at the wrong size). 
            The rectangle should also be red. The polygon has a points attribute and is a child of an 
            element with id="x" so the selecto #x [points] matches, making the polygon green. 
         </p>
      <p>
            The rendered picture should match the reference image exactly, except for possible
            variations in the labelling text (per CSS2 rules).
         </p>
      <p>
            This tests uses 'g', 'circle', 'rect' and 'polygon' elements, as well as
            fill (solid CSS1 named colors), font-family ("Arial"), and
            font-size properties within the 'style' attribute and style element.
         </p>

		</div>
<div class="linkbar"> <p>
				<a href="full-styling-css-01-b.html">styling-css-01-b ←</a>
				<a href="full-index.html">index</a>
				<a href="full-styling-css-03-b.html">→ styling-css-03-b</a>
						</p></div>
</body>
</html>
